<!DOCTYPE html>
<html lang="ch">
    
    <head>
        <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
            <link rel="stylesheet" href="css/swiper.min.css">
                <link rel="stylesheet" href="css/mui.min.css" />
                <script src="js/swiper.min.js"></script>
                <script src="js/mui.min.js"></script>
                <script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
                <script src="js/config.js"></script>
                <script src="js/projectDetail.js"></script>
                <link rel="stylesheet" type="text/css" href="css/main.css" />
                <title></title>
                <style type="text/css">
                    input{
                        -webkit-user-select: auto;
                    }
                </style>
                </head>
    
    <body>
        <div class="conditionList" style="display: none;" id="downwindows_1">
            <div class="conditionList_con">
                <div class="conditionList_one" id="conditionList_1">
                    <p style="color: #b12f41">全部<span><img class="float_r" src="img/conditionList_icon_s.png" style="margin-top: 16px;width: 13px"></span></p>
                    <p>晚上</p>
                    <p>傍晚</p>
                    <p>白天</p>
                    <p>黎明</p>
                </div>
            </div>
        </div>
        <div class="conditionList" style="display: none;" id="downwindows_2">
            <div class="conditionList_con">
                <div class="conditionList_one" id="conditionList_2">
                    <p style="color: #b12f41">全部<span><img class="float_r" src="img/conditionList_icon_s.png" style="margin-top: 16px;width: 13px"></span></p>
                    <p>本地关机</p>
                    <p>本地1级光</p>
                    <p>本地2级光</p>
                    <p>远程关机</p>
                    <p>远程1级光</p>
                    <p>远程2级光</p>
                    <p>远程3级光</p>
                    <p>远程自动</p>
                    <p>远程调频</p>
                    <p>远程配置闪光起始点</p>
                    <p>远程配置闪光持续时间</p>
                    <p>远程调节亮度等级</p>
                    <p>远程配置光控灵敏度</p>
                </div>
            </div>
        </div>
        <div class="conditionList" style="display: none;" id="downwindows_3">
            <div class="conditionList_con">
                <div class="conditionList_one" id="conditionList_3">
                    <p style="color: #b12f41">全部<span><img class="float_r" src="img/conditionList_icon_s.png" style="margin-top: 16px;width: 13px"></span></p>
                    <p>正常</p>
                    <p>离线</p>
                </div>
            </div>
        </div>
        <div class="nav_con">
            <div style="width: 10%;height: 100%;float: left;" onclick="window.location.href='home.html'"><img onclick="window.location.href='home.html'" class="nav_icon float_l" src="img/nav_icon_bar@2x.png"> <p id="proName"></p></div>
            <div id="projectname" style="width: 80%;height: 100%;float: left;">项目详情</div>
            <div style="width: 10%;height: 100%;float: left;" onclick="window.location.href='controlSetting.html?type=all'"><img onclick="window.location.href='controlSetting.html?type=all'" class="nav_icon float_r" src="img/nav_icon_set@2x.png"></div>
            <div class="clear"></div>
        </div>
        <div class="cd_nr">
            <div class="banner_con">
                <div class="banner">
                    <div class="banner_weather" id="temperature"></div>
                    <!--<div class="swiper-container">
                     <div class="swiper-wrapper" id="projectImg">
                     </div>
                     </div>-->
                    <div class="mui-slider" id="proImgs">
                        <div class="mui-slider-group" id="projectImg">
                        </div>
                    </div>
                    <div class="banner_bot">
                        <img class="float_l" src="img/icon_position.png" style="width: 15px;">
                            <p class="float_l" id="address"></p>
                            <p id="proImgPage" class="float_r">1/5</p>
                            <div class="clear"></div>
                            </div>
                </div>
            </div>
            <div class="pic_con">
                <div class="pic_but">
                    <p class="pic_but_l float_l">上位机上传图集</p>
                    <div class="pic_but_r float_r" id="hideImg2" style="cursor: pointer;">
                        <p class="pic_but_r_l float_l">收缩</p>
                        <img class="float_l pic_but_r_r" src="img/icon_retract@2x.png">
                            <div class="clear"></div>
                            </div>
                    <div class="pic_but_r float_r" id="showImg2" style="display: none;cursor: pointer;">
                        <p class="pic_but_r_l float_l">展开</p>
                        <img class="float_l pic_but_r_r" src="img/icon_open@2x.png">
                            <div class="clear"></div>
                            </div>
                </div>
                <!--<div class="swiper-container">
                 <div id="atlImg" class="swiper-wrapper">
                 
                 </div>
                 </div>-->
                <div class="mui-slider" id="atlImgs">
                    <div class="mui-slider-group" id="atlImg">
                    </div>
                    <p id="atlImgPage" class="float_r">1/5</p>
                </div>
                
            </div>
            <div class="conList_con">
                <div class="conList_title">
                    <p class="conList_name float_l">项目控制器</p>
                    <p class="float_l conList_tole" id="controllerAllNum"></p>
                    <p class="float_r conList_tole_nub" id="controllerGoodNum"></p>
                    <div class="clear"></div>
                </div>
                <div class="conList_ser">
                    <img class="conList_ser_icon float_l" src="img/icon_search@2x.png">
                        <input type="search" class="float_l" placeholder="搜索项目" id="key" >
                            <div class="clear"></div>
                            </div>
                <div class="conList_condition">
                    <div class="conList_ping float_l">
                        <div class="centered">
                            <div class="conList_condition_name float_l point" style="cursor: pointer;" id="condition_1">环境光状态</div>
                            <img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
                                <div class="clear"></div>
                                </div>
                    </div>
                    <div class="conList_ping float_l">
                        <div class="centered">
                            <div class="conList_condition_name float_l" style="cursor: pointer;" id="condition_2">控制器模式</div>
                            <img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
                                <div class="clear"></div>
                                </div>
                    </div>
                    <div class="conList_ping float_l">
                        <div class="centered">
                            <div class="conList_condition_name float_l" style="cursor: pointer;" id="condition_3">控制器状态</div>
                            <img class="float_l" src="img/icon_tiao.png" style="width: 8px; margin-left: 4px;margin-top: 14px">
                                <div class="clear"></div>
                                </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div style="margin-bottom: 20px;" id="conList">
                </div>
            </div>
            <script>
                $(".pic_con").hide()
                document.querySelector('.mui-slider').addEventListener('slide', function(event) {
                                                                       document.getElementById("proImgPage").innerHTML = event.detail.slideNumber+1+"/"+imgNum
                                                                       
                                                                       });
                                                                       document.querySelector('#atlImgs').addEventListener('slide', function(event) {
                                                                                                                           document.getElementById("atlImgPage").innerHTML = event.detail.slideNumber+1+"/"+altNum
                                                                                                                           });
                                                                                                                           var mySwiper = new Swiper('.swiper-container', {
                                                                                                                                                     direction: 'horizontal', // 垂直切换选项
                                                                                                                                                     loop: true, // 循环模式选项
                                                                                                                                                     roundLengths: true,
                                                                                                                                                     slidesPerView: "auto",
                                                                                                                                                     centeredSlides: true,
                                                                                                                                                     autoplay: {
                                                                                                                                                     delay: 1700,
                                                                                                                                                     },
                                                                                                                                                     
                                                                                                                                                     // 如果需要分页器
                                                                                                                                                     pagination: {
                                                                                                                                                     el: '.swiper-pagination',
                                                                                                                                                     },
                                                                                                                                                     
                                                                                                                                                     // 如果需要前进后退按钮
                                                                                                                                                     navigation: {
                                                                                                                                                     nextEl: '.swiper-button-next',
                                                                                                                                                     prevEl: '.swiper-button-prev',
                                                                                                                                                     },
                                                                                                                                                     
                                                                                                                                                     // 如果需要滚动条
                                                                                                                                                     scrollbar: {
                                                                                                                                                     el: '.swiper-scrollbar',
                                                                                                                                                     },
                                                                                                                                                     })
                                                                                                                                                     var mySwiper = new Swiper('.swiper-con', {
                                                                                                                                                                               direction: 'horizontal', // 垂直切换选项
                                                                                                                                                                               loop: true, // 循环模式选项
                                                                                                                                                                               
                                                                                                                                                                               // 如果需要分页器
                                                                                                                                                                               pagination: {
                                                                                                                                                                               el: '.swiper-pagination',
                                                                                                                                                                               },
                                                                                                                                                                               
                                                                                                                                                                               // 如果需要前进后退按钮
                                                                                                                                                                               navigation: {
                                                                                                                                                                               nextEl: '.swiper-button-next',
                                                                                                                                                                               prevEl: '.swiper-button-prev',
                                                                                                                                                                               },
                                                                                                                                                                               
                                                                                                                                                                               // 如果需要滚动条
                                                                                                                                                                               scrollbar: {
                                                                                                                                                                               el: '.swiper-scrollbar',
                                                                                                                                                                               },
                                                                                                                                                                               });
                                                                                                                                                                               $("#key").on('keypress', function(e) {
                                                                                                                                                                                            var keycode = e.keyCode;
                                                                                                                                                                                            //获取搜索框的值
                                                                                                                                                                                            vocabularyName = $(this).val();
                                                                                                                                                                                            if (keycode == '13') {
                                                                                                                                                                                            e.preventDefault();
                                                                                                                                                                                            queryControllerList()
                                                                                                                                                                                            }
                                                                                                                                                                                            });
                                                                                                                                                                                            
                                                                                                                                                                                            $("#projectname").html(sessionStorage.getItem("ProName"))
                </script>
        </div>
        
    </body>
    
</html>
